
<template>
  <div class="hello-ezuikit-js">
    <div id="video-container" style="width: 100%; height: 500px">
      <!-- <div
        class="mask"
        @click="togglePlay"
        :style="{ display: play ? 'none' : 'block' }"
      ></div>
      <div class="controll">
        <div class="left">
          <el-tooltip effect="dark" :content="play ? '正在播放' : '停止'">
            <i
              :class="play ? 'el-icon-video-pause' : 'el-icon-video-play'"
              @click="togglePlay"
            ></i>
          </el-tooltip>
          <el-tooltip effect="dark" content="视频截图">
            <i class="el-icon-camera" @click="isCapturePicture"></i>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            :content="enableZ ? '电子放大-已开启' : '电子放大-已关闭'"
          >
            <i
              :class="enableZ ? 'el-icon-zoom-out' : 'el-icon-zoom-in'"
              @click="toggleZoom"
            ></i>
          </el-tooltip>
        </div>
        <div class="right">
          <el-tooltip effect="dark" content="全屏">
            <i class="el-icon-full-screen" @click="isFullScreen"></i>
          </el-tooltip>
        </div>
      </div> -->
    </div>
  </div>
</template>
 
<script>
import EZUIKit from "ezuikit-js";
import api from "@/utils/ezviz/api";
export default {
  name: "ParamVideo",
  data() {
    return {
      player: null,
      enableZ: false, //默认关闭电子放大
      play: false, //默认停止播放
    };
  },
  mounted() {
    // this.fetchDeviceList();
    console.group("mounted 组件挂载完毕状态===============》");
    this.player = new EZUIKit.EZUIKitPlayer({
      autoplay: false,
      id: "video-container",
      accessToken:
        "at.ck1gy1sx4wv2o2vn8mx1u5j6bkhvhlmm-26l0vqi6vq-19sammz-rx4vg40l4",
      url: "ezopen://open.ys7.com/BA5899709/1.hd.live",
      template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      width: 600,
      height: 500,
    });
  },
  beforeDestroy() {
    console.log("打印吗");
    if (this.play) this.player.stop();
  },
  methods: {
    fetchDeviceList() {
      api
        .getEZVIZToken()
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.error("获取设备列表失败:", error);
        });
    },
    // // 开启/关闭 电子放大
    // toggleZoom() {
    //   if (!this.player || !this.play) return;
    //   switch (this.enableZ) {
    //     case true:
    //       this.player.closeZoom();
    //       this.enableZ = false;
    //       break;
    //     case false:
    //       this.player.enableZoom();
    //       this.enableZ = true;
    //       break;
    //     default:
    //       break;
    //   }
    // },
    // // 播放/停止 监控
    // togglePlay() {
    //   if (!this.player) return;
    //   switch (this.play) {
    //     case true:
    //       this.player.stop();
    //       this.play = false;
    //       break;
    //     case false:
    //       this.player.play();
    //       this.play = true;
    //       break;
    //     default:
    //       break;
    //   }
    // },
    // // 视频截图
    // isCapturePicture() {
    //   if (!this.player || !this.play) return;
    //   this.player.capturePicture();
    // },
    // // 全屏
    // isFullScreen() {
    //   if (!this.player || !this.play) return;
    //   this.player.fullScreen();
    // },
  },
};
</script>
<style lang="scss" scoped>
// #video-container {
//   position: relative;
// }
// ::v-deep #video-container iframe {
//   width: 100% !important;
// }
// .mask {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 500px;
//   background: rgba(255, 255, 255, 0.6) url("../../assets/img/play.png")
//     no-repeat center;
//   background-size: 100px;
// }
// .controll {
//   display: flex;
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   height: 48px;
//   line-height: 48px;
//   background: rgba(0, 0, 0, 0.65);
//   padding: 0 15px;
//   z-index: 2;
//   opacity: 0;
//   transition: all 0.3s;
//   .left {
//     width: 50%;
//     i {
//       margin-right: 10px;
//     }
//   }
//   .right {
//     width: 50%;
//     text-align: right;
//   }
//   i {
//     vertical-align: middle;
//     color: #fff;
//     font-size: 30px;
//   }
// }

// #video-container:hover .controll {
//   opacity: 0.65;
// }
</style>